<template>
    <div>

        <div id="large-header" class="large-header login-page">
			<canvas id="demo-canvas" width="1590" height="711"></canvas>
			<div class="login-form">
				<div class="login-content">
					<!-- 标题 -->
					<h1 class="title_name">用户注册</h1>
					<form method="post" role="form" id="form_login" class="login_padding">
						<div class="form-group clearfix">

							<div class="input-group">
								<!-- <div class="input-group-addon">
									<i class="icon_user"></i>
								</div> -->
								<!-- 手机输入框 -->
								<input type="text" class="form-control" name="loginId" id="loginId" placeholder="账号" autocomplete="off" v-model="loginId">
							</div>
						</div>

						<div class="form-group clearfix">

							<div class="input-group">


								<input type="password" class="form-control" name="password" id="password" placeholder="密码" autocomplete="off" v-model="loginPassword">
							</div>

						</div>

						<div class="form-group clearfix">

							<div class="input-group">
								<input type="password" class="form-control" name="Twopassword" id="password" placeholder="确认密码" autocomplete="off" v-model="Twopassword">
							</div>

						</div>

                        <!-- 填写注册邮箱，获取验证码 -->
						<div class="form-group clearfix">

							<div class="input-group">
								<input type="email" class="form-control" name="email" id="email" placeholder="电子邮箱" autocomplete="off" v-model="mail" ref="mail">
							</div>

						</div>

                        <!-- 邮箱验证码 -->
                        <div class="form-group clearfix">
					        <div class="input-group col-lg-8 col-md-8 col-xs-8 myemail">
                                <input type="text" class="form-control text_phone" name="code" id="code" placeholder="电子邮箱验证码" autocomplete="off" v-model="code" required >
					        </div>
                            <div class="col-lg-4 col-md-4 col-xs-4 fl">
                                <input type="button" id="btn" class="btn_mfyzm" value="获取验证码" @click="getRCode" ref="btn">
                                </div>
				        </div>




						<!-- <div class=" textright"><a href="#" class="forget">忘记密码？</a></div> -->

						<div class="form-group">
							<a href="javascript:;" type="button" class=" btn-danger btn-block btn-login res" @click="Register">
								<!-- <i class="fa fa-sign-in"></i> -->
								注册
							</a>
						</div>

						<div class=" textright"><a href="javascript:history.back(-1)" class="forget">已注册</a></div>

					</form>
				</div>

			</div>
		</div>
        
    </div>
</template>

<script>


// import 'bootstrap/dist/css/bootstrap.min.css'
import "../../../assets/login/css.css"
export default {
    data () {
      return {
          loginId:'',
          loginPassword:'',
          Twopassword:'',
          mail:'',//邮箱
          code:'',
          Rcode:'',//返回正确的邮箱验证码
          iscode:false,
          registerUrl:this.pathUrl.registerUrl,
          getCodeUrl:this.pathUrl.getRCodeUrl,
        //   registerUrl:'http://localhost:3003/api/user/register',
        //   getCodeUrl:'http://localhost:3003/api/user/getRcode',//获得邮箱验证码
      }
    },

    methods: {
        //成功的弹出框
        open2(message) {
                this.$message({
                showClose: true,
                message,
                type: 'success',
                duration:1500,
                });
            },
        //失败的弹出框
        open4(message) {
                this.$message({
                showClose: true,
                message: message,
                type: 'error',
                duration:1500,
                });
            },
        //发送注册函数
        Register(){

            if(this.iscode==false)//
            {
                this.open4("请获取验证码")
                console.log("请获取验证码")

            }
            else
            {
                if(this.code != this.Rcode)
                {
                    console.log("验证码错误")
                    this.open4("验证码错误")
                }
                else
                {   
                    console.log("验证码正确")
                   if(typeof(this.loginId)=="undefined" || this.loginId =="")
                   {
                       console.log("请输入账号")
                       this.open4("请输入账号")
                       return 0
                   }
                   if(typeof(this.loginPassword)=="undefined" || this.loginPassword =="")
                   {
                       console.log("请输入密码")                       
                       this.open4("请输入密码")
                       return 0
                   }
                   if(typeof(this.Twopassword)=="undefined" || this.Twopassword =="")
                   {
                       console.log("请输入确认密码")
                        this.open4("请输入确认密码")
                        return 0            
                   }
                   if(this.loginPassword != this.Twopassword)
                   {
                       console.log("两次密码不一致")
                       this.open4("两次密码不一致")
                       return 0
                   }
                    // console.log("验证码正确111")
                    this.$axios.post(this.registerUrl,{
                        loginId:this.loginId,
                        loginPassword:this.loginPassword,
                        mail:this.mail,
                        code:this.code,
                    })
                    .then(r=>{
                        console.log(r)
                        if(r.data.status=="no"){
                            this.open4("账号存在，注册失败")
                        }
                        else{
                            this.open2("注册成功")
                            this.$router.push("/login")
                        }
                    })
                    
                }    
            }
            


        },
        // 获取验证码
        getRCode(){
            var btn=this.$refs.btn;//按钮
            var time=60;//倒计时间
            this.$axios.post(this.getCodeUrl,{
            mail:this.mail,
                 // mail:this.email,
            })
            .then((resule)=>{
                 console.log(resule)
                 if(resule.data.status=="yes"){
                     this.Rcode=resule.data.Rcode//正确邮箱验证码赋值
                     this.iscode=true;//可以运行
                    this.open2(resule.data.r)
                    // console.log(this.$refs.mail)
                    this.$refs.mail.disabled=true;//是否执行注册关键词
                    this.$refs.mail.style.backgroundColor="#bbbbbb"//添加背景颜色
                    // console.log(this.$refs.btn)
                    btn.disabled=true;//给按钮按不了的属性
                    btn.classList.add("msgs1")
                    var t=setInterval(function  () {
                            time--
                            // console.log(btn)
                            btn.value=(time+"秒");
                            if (time==0) {
                                clearInterval(t);
                                btn.value=("重新获取");
                                btn.classList.remove("msgs1")
                                btn.removeAttribute("disabled");
                            }
                    },1000);
                 }
                 else{
                     this.$refs.mail.disabled=false
                     this.open4(resule.data.r)
                 }
                //  this.code=resule.data.
            // console.log(typeof(resule))
                return resule})
            .catch((r)=>{
                console.log('发现错误')
            })
            
        },//获取验证码结束
	},
	created:function(){
		
	},
	mounted:function(){
		require('../../../assets/login/jquery-1.11.0.min.js');
		require ('../../../assets/login/demo-1.js');

	},
    components: {},
}
</script>

<style scoped>



.large-header {
    position: relative;
    width: 100%;
    background:url(../../../assets/images/bg.jpg) no-repeat;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    z-index: 1;
}
.logobg_style  {
    position: absolute;
    top: 50%;
    font-family: "微软雅黑", Microsoft YaHei UI;
    margin-top: -225px;
    margin-left: -200px;
    left: 50%;
    z-index: 999;
    -webkit-transition: all 550ms ease-in-out;
    -moz-transition: all 550ms ease-in-out;
    -o-transition: all 550ms ease-in-out;
    transition: all 550ms ease-in-out;
}
.login-content {
    position: relative;
    width: 400px;
    z-index: 999;
    height: 510px;
    box-shadow: 0px 3px 6px #333333;
    background: url(../../../assets/images/bg_03.png) repeat;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    margin: 0 auto;
    text-align: center;
    padding: 25px 0;
    -webkit-transition: all 550ms ease-in-out;
    -moz-transition: all 550ms ease-in-out;
    -o-transition: all 550ms ease-in-out;
    transition: all 550ms ease-in-out;
}
.title_name {
    color: #ffffff;
    font-weight: bold;
}
.login_padding {
    padding: 15px 40px;
    position: relative;
}
.logobg_style .form-group {
    margin-bottom: 25px;
    display: block;
}
.logobg_style .input-group {
    height: 45px;
    float: left;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.login-form {
    position: absolute;
    top: 50%;
    font-family: "微软雅黑", Microsoft YaHei UI;
    margin-top: -225px;
    margin-left: -200px;
    left: 50%;
    z-index: 999;
    -webkit-transition: all 550ms ease-in-out;
    -moz-transition: all 550ms ease-in-out;
    -o-transition: all 550ms ease-in-out;
    transition: all 550ms ease-in-out;
}
.textright {
    height: 35px;
    text-align: right;
}


/* 电子邮箱 */
.logobg_style .form-group {
    margin-bottom: 25px;
    display: block;
}
.logobg_style,.input-group {
    height: 45px;
    float: left;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.fl {
    float: left;
}
.col-xs-4 {
    width: 33.33333333%;
}
.myemail{
    padding: 0;
    width: 66.6667%;
}
.btn_mfyzm{
    height: 38px;
}
</style>